<template>
  <el-container
    class="admin-container"
    :style="{ width: '100%', height: '100%', backgroundColor: '#eceff1' }"
  >
    <span
      class="sidebar-arrow"
      :class="{ 'is-active': !isCollapse }"
      @click="handleCollapse"
    >
      <img src="../../assets/arrow.png" alt="" />
    </span>
    <el-aside :width="isCollapse ? '200px' : '0'" class="admin-side">
      <side-bar :sideList="adminRoutes"></side-bar>
    </el-aside>
    <el-main class="admin-main">
      <router-view> </router-view>
    </el-main>
  </el-container>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
import sideBar from "../../components/SideBar/index.vue";
export default {
  name: "admin",
  components: { sideBar },
  setup() {
    const store = useStore();
    const isCollapse = computed(() => {
      return store.getters.sidebar.opened;
    });
    const adminRoutes = computed(() => {
      const routes = store.getters.permisstionRoutes;
      const list = routes.filter((item) => item.code == "admin");

      const iconsArr = [
        {
          code: "user",
          icon: "el-icon-user",
        },
        {
          code: "configuration",
          icon: "el-icon-collection",
        },
        {
          code: "heatSource",
          icon: "el-icon-s-opportunity",
        },
        {
          code: "menu",
          icon: "el-icon-menu",
        },
        {
          code: "heatStation",
          icon: "el-icon-set-up",
        },
        {
          code: "system",
          icon: "el-icon-data-line",
        },
        {
          code: "energy",
          icon: "el-icon-s-marketing",
        },
        {
          code: "realDataManage",
          icon: "el-icon-data-analysis",
        },
      ];
      const result = list[0].children.map((item) => {
        let iconItem = iconsArr.find((val) => item.code === val.code);
        return {
          ...item,
          icon: iconItem ? iconItem.icon : "el-icon-help",
        };
      });
      return result;
    });

    const handleCollapse = () => {
      store.commit("app/TOGGLE_SIDEBAR");
    };

    return {
      isCollapse,
      handleCollapse,
      adminRoutes,
    };
  },
};
</script>

<style lang="less" scoped>
.admin-container {
  box-shadow: none;
  .admin-side {
    height: 100%;
    background: #fff;
    border-radius: 4px;
    position: relative;
    transition: width 0.5s;
  }
  .admin-main {
    margin-left: 10px;
    height: 100%;
    background: #fff;
    border-radius: 4px;
  }
}
</style>
<style lang="less">
.admin-container .el-main {
  padding: 15px;
}
.sidebar-arrow {
  position: absolute;
  left: 200px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1000;

  &.is-active {
    left: 0;
    transform: rotate(180deg);
  }
  img {
    // width: 30px;
    // height: 35px;
    display: block;
  }
}
</style>
